<template>
    <h1>轮播图列表页面</h1>
    <el-table :data="bannerList" style="width: 100%">
        <el-table-column label="轮博图" width="230">
            <template #default="scope">
                <el-image :src="scope.row.img" />
            </template>
        </el-table-column>
        <el-table-column prop="link" label="图片连接信息" width="180" />
        <el-table-column prop="alt" label="图片提示信息" width="180" />
        <el-table-column label="操作" >
            <template #default="scope">
                <el-button size="small">编辑</el-button>
                <el-button size="small" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination 
        layout="prev, pager, next" 
        :total="listLength" 
        :default-page-size="5" 
        v-model:current-page="current" 
    />
</template>

<script>
import { getBannerList } from "@/api/banner"

export default {
    data() {
        return {
            bannerList: [],
            current: 1,
        }
    },
    methods: {

    },
    async mounted() {
        const res = await getBannerList()
        this.bannerList = res.data
        console.log(this.bannerList);
    },
    computed: {
        bannerListCom() {
            return this.bannerList.slice(
                (this.current - 1) * 15,
                this.current * 15
            );
        },
    },
}
</script>

<style scoped>
.el-image {
    width: 200px;
    height: 150px;
}
</style>